<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="<%=basePath%>/lib/echarts/echarts.common.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/echarts/shine.js"></script>
<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}

	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

.sceneList-info{
	padding-top: 10px;
	padding-left: 10px;
}
#kkpager{
	clear: none !important;
}
</style>
</head>
<body>
	<div>
		<div>
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<ul class="dashboard-menu">
					<div class="prolist">
						<span>项目列表</span>
					</div>
					<ul class="dashboard-menu scoll">
						<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
							<li onclick="changeScene(this)"  
							 <c:if test="${status.index ==0}">
							 	 class="active"
							 </c:if> 
							  sid="${obj.id}">
		                       <span class="icon-stack-overflow"></span>&nbsp;${obj.name }
		                    </li>
						</c:forEach>
					</ul>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							<div class="search-container" >
									
									<select onchange="selectPro()" style="padding-right: 23px;width: 180px;" type-name="node_id"  class="input jui-selecter input-self input-select node_id"  
												config-option=" url:'/page/node.json?pageSize=300&paged=1',data:{scene_id:'$.scene_id$' },'key':'id','value':'name,device_code',init_value:'请选择传设备' ,type:'page',success:'successfunc' " ></select>
									
									<select type-name="sensor_id"  class="input input-self input-select sensor_id"  
												config-option=" url:'/page/sensor.json?pageSize=300&paged=1',data:{node_id:'$.node_id$' },
												init_value:'请选择传感点','key':'id','value':'name',type:'page'" ></select>
									<input type-name="scene_id" class="scene_id" type="hidden" />
									
									<input type-name="start_time" class="input input-self jui-time start_time" data-options="defaultValue:-1" >
									<span >~</span>
									<input type-name="end_time" class="input input-self jui-time end_time" >
									
									<button id="searchbtns" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> 查询</button>
							</div>
							
							 <div style="margin-top:10px;">
								<div id="main" style="width: 100%;height:450px;"></div>
							</div> 
						
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

function selectPro(){
	if(validater.empty( $(".node_id").val() )){
		$(".sensor_id").empty();
		$(".sensor_id").append("<option value=''>请选择传感点</option>");
	}else{
		var config  = getConfig($(".sensor_id")) ;
		init_select(config,$(".sensor_id"));
	}
}

function changeScene(obj){
	$(".dashboard-menu li").removeClass("active");
	$(obj).addClass("active");
	$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
	reflash();
	
	myChart.setOption( {
			xAxis:{
				 data: []
			},
			 series: [{
				 data: []
			 }]
		} );
}

var myChart ;

$(function(){
	$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
	
	
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('main'),'shine' );

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '设备历史数据'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
        	type: 'category',
        	axisLabel:{
        		rotate:20 
        	}
        },
        yAxis: {},
	    toolbox: {
	       show : true,
	       feature : {
	           saveAsImage : {name:'历史数据',
	                pixelRatio:2}
	       }
	   },
       dataZoom : {
            show : true,
            realtime : true,
            start : 0,
            end : 100
        },
        series: [{
            name: '数值',
            type: 'line',
            smooth: true,
	        markPoint : {
	           data : [
	               {type : 'max', name: '最大值'},
	               {type : 'min', name: '最小值'}  ]
	        },
	        markLine : {
	           data : [
	               {type : 'average', name: '平均值'}  ]
	        }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
    $("#searchbtns").click(function(){
    	if( $(".node_id").val() =='' || $(".sensor_id").val() =='' || $(".start_time").val() =='' || $(".end_time").val() =='' ){
    		tip("请填写好查询条件");
    		return ;
    	}
    	
    	if(!DateUtil.compare(gic("start_time").val(),gic("end_time").val(),30*24*60*60*1000 )){
    		tip("查询时间不能超过一个月");
        	return ;
    	}
    	
    	myChart.showLoading();
    	
    	var searchData = {
    		sensor_id:$(".sensor_id").val() ,
    		start_time:  $(".start_time").val().replace(/-/g,"/") ,
    		end_time: $(".end_time").val().replace(/-/g,"/")
    	} ;
    	commonAjax( 'POST' , 
    			localUrl + '/list/sensor/history.json' ,searchData  ,function(data){
    		if(data.status == status_code.OK){
    			var dataTemp  = data.data ;
    			var x_value =[];
    			var y_value =[];
    			for(var i=0;i< dataTemp.length; i++){
    				x_value.push(dataTemp[dataTemp.length-i-1]['atimestr'] );
    				y_value.push(dataTemp[dataTemp.length-i-1]['sdata'])
    			}
    			var option = {
    				xAxis:{
    					 data: x_value
    				},
    				 series: [{
    					 data: y_value
    				 }]
    			} ;
    			myChart.setOption(option);
    		}else{
    			tip("该时间段内，暂无数据");
    		}
    		myChart.hideLoading() ;
    	});
    })
    
})

function reflash(){
	
	$(".sensor_id").empty();
	$(".sensor_id").append("<option value=''>请选择传感点</option>");
	manual_init_selecter($(".jui-selecter"));

}

function successfunc(){
	selectPro();
}
</script>
</html>